<template>
  <div class="userInfo-container">
    <div class="header">用户信息</div>
    <div style="margin-top:10px;">
      <van-grid :column-num="3">
        <van-grid-item>
          <div class="number">{{detail?detail.today.total:0}}</div>
          <div class="text">今日新增</div>
        </van-grid-item>
        <van-grid-item>
          <div class="number">{{detail?detail.yesterday.total:0}}</div>
          <div class="text">昨日</div>
        </van-grid-item>
        <van-grid-item>
          <div class="number">{{detail?detail.this_week.total:0}}</div>
          <div class="text">本周</div>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="3">
        <van-grid-item>
          <div class="number">{{detail?detail.this_month.total:0}}</div>
          <div class="text">本月</div>
        </van-grid-item>
        <van-grid-item>
          <div class="number">{{detail?detail.this_year.total:0}}</div>
          <div class="text">本年</div>
        </van-grid-item>
        <van-grid-item>
          <div class="number">{{total}}</div>
          <div class="text">自定义</div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="search-box">
      <van-cell title="选择日期区间" :value="date" @click="show = true" is-link arrow-direction="down"></van-cell>
      <van-button type="primary" size="mini" icon="replay" @click="resultMethod"></van-button>
    </div>
    <van-calendar :min-date="minDate" :max-date="maxDate" v-model="show" type="range" @confirm="onConfirm"></van-calendar>
    <van-search v-model="keyword" show-action placeholder="请输入家长昵称或学号" @input="searchMethod"></van-search>
    <div class="switch">
      <van-switch v-model="checked" size="24px" @change="isTel"></van-switch>
      <span style="margin-left:0.2rem;">只显示有电话的家长</span>
    </div>
    <div style="padding:0 0.3rem;position: relative;">
      <van-list loading-text="加载中" v-model="loading" :finished="finished"
        :finished-text="listData.length > 0 ? '没有更多了' : ''" @load="initPage">
        <div class="demo-preview" v-for="(item,index) in listData" :key="index">
        <img :src="item.icon" alt="">
        <div class="demo-content">
          <div class="demo-text">姓名:{{item.s_name}}/{{ item.realname }}</div>
          <div class="demo-text">ID:{{item.code}}</div>
          <div class="demo-text">顾问:{{item.adviser}}</div>
          <div class="demo-text">电话：{{item.mobile}}<van-button :url="'tel:'+item.mobile" v-if="item.mobile" style="margin-left:10px;" type="primary" icon="phone-o" size="mini">拨打</van-button></div>
        </div>
      </div>
      </van-list>
      
      <empty description="暂无内容" v-if="listData.length == 0"></empty>
    </div>
  </div>
</template>
  <script>
import { Icon, Grid, GridItem, Cell, Calendar,Search,Switch,List,Button} from 'vant';
export default {
  components: {
    [Icon.name]: Icon, [Grid.name]: Grid, [GridItem.name]: GridItem, [Cell.name]: Cell,
    [Calendar.name]: Calendar, [Search.name]: Search, [Switch.name]: Switch,[List.name]:List,[Button.name]:Button
  },
  data() {
    return {
      show: false,
      minDate: new Date(new Date().getFullYear() - 2, 0, 1),
      maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      date: '请选择',
      keyword: '',
      checked: false,
      loading: false,
      detail: null,
      startTime: '',
      endTime: '',
      total: 0,
      listData: [],
      finished: false,
      error: false,
      page: 1,
      psize: 20,
      noInfo: true,
      selbytime: '',
    };
  },

  created() {
    this.initAjaxMethod();
    this.initPage();
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading("加载中...");
      this.$http
        .post(this.$API.GET_PEROFFICE_GETMEMEMBERTOTAL)
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.detail=res.data || {};
          }
        });
    },
    initTime(flag = 1) {
      let date = new Date().getTime(), sj = '';
      console.log(date);
      if (flag == 1) {
        let t = date - (24 * 60 * 60 * 1000 * 60);
        console.log(t);
        sj = this.timestamp(t);
      } else {
        sj = this.timestamp(date);
      }
      return sj;
    },
    timestamp(timestamp) {
      var d = new Date(timestamp);    //根据时间戳生成的时间对象
      var year = d.getFullYear()
      var month = d.getMonth() + 1
      var day = d.getDate()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      let date = year + "-" + month + "-" + day
      return date
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${date.getDate() > 9 ? date.getDate() : '0' + date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.listData = [];
      this.selbytime = 'byselfdy';
      this.initPage();
    },
    searchMethod() {
      this.listData = [];
      this.initPage();
    },
    isTel() {
      this.listData = [];
      this.initPage();
    },
    resultMethod() {
      this.listData = [];
      this.date = '';
      this.startTime = '';
      this.endTime = '';
      this.selbytime = '';
      this.total = 0;
      this.initPage();
    },
    initPage() {
      const toast = this.$toast.loading('加载中...');
      this.$http
        .post(this.$API.GET_PEROFFICE_GETMEMEMBERLIST, {
          start_time: this.startTime,
          end_time: this.endTime,
          ismobile: this.checked ? 1 : 0,
          keyword: this.keyword,
          page: this.page,
          pageSize:this.psize
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let isOver = list.length < this.psize ? true : false;
            this.finished = isOver;
            this.loading = false;
            this.listData = this.page == 1 ? list : [...this.listData, ...list];
            this.total = res.data.total;
            if (!isOver) {
              this.page++;
            }
          }
        });
    },
  }
};
  </script>
  
  <style lang="less">
.userInfo-container {
  .header {
    height: 0.7rem;
    line-height: 0.7rem;
    background-size: 100% 100%;
    font-size:0.3rem;
    text-align: center;
  }
  .number {
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size:0.32rem;
    color: #0d8ddb;
  }
  .text {
    padding-top: 0.2rem;
    font-size:0.32rem;
  }
  .switch {
    padding: 0.2rem 0.3rem;
    display: flex;
    align-items: center;
    font-size: 0.3rem;
  }
  .demo-preview {
    display: flex;
    padding: 0.2rem 0.32rem;
    background: #fff;
    border-radius: 0.12rem;
    box-shadow: 1px 1px 5px -3px #000;
    margin-bottom: 0.2rem;
  }
  .demo-preview img {
    flex-shrink: 0;
    width: 0.64rem;
    height: 0.64rem;
    margin-right: 0.32rem;
    background: #eee;
    border-radius: 50%;
  }
  .demo-content {
    padding-top: 0.12rem;
  }
  .demo-text {
    margin: 0.12rem 0 0;
    font-size: 0.3rem;
    line-height: 0.4rem;
    display: flex;
    align-items: center;
  }
  .search-box {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 0.2rem;
  }
  .van-cell__value {
    font-size: 0.28rem;
  }
}
</style>